<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Jack</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
	<script src="sample.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	//<![CDATA[

var editor;

function createEditor() {
	if ( editor )
		return;
	
	// Create a new editor inside the <div id="editor">	
	editor = CKEDITOR.appendTo( 'editor' );
}

function removeEditor() {
	if ( !editor )
		return;

	// Retrieve the editor contents. In an Ajax application, this data would be
	// sent to the server or used in any other way.
	document.getElementById( 'editorcontents' ).innerHTML = editor.getData();
	document.getElementById( 'contents' ).style.display = '';

	// Destroy the editor.
	editor.destroy();
	editor = null;
}

var xmlhttp;

function findDocuments() {
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
		alert("Browser does not support HTTP Request");
	}
	var url = "getdocs.php";
	url = url + "?userid=" + document.getElementById('userid').value;
	xmlhttp.onreadystatechange = stateChanged;
	xmlhttp.open("GET", url, true);
	xmlhttp.send(null);
}

function updateDocumentContents() {
	createEditor();
	var did = document.getElementById('userInput').value;
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
		alert("Browser does not support HTTP Request");
	}
	var url = "getdocbyid.php?did=" + did;
	xmlhttp.onreadystatechange = stateChanged2;
	xmlhttp.open("GET", url, true);
	xmlhttp.send(null);
}

function sendEdit() {
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
		alert("Browser does not support HTTP Request");
	}
	var did = document.getElementById('userInput').value;
	var uid = document.getElementById('userid').value;
	var character = 't';
	var location = 0;
	var url = "sendEdit.php";
	var params = "did="+did+"&uid="+uid+"&char="+character+"&loc="+location;
	xmlhttp.open("POST", url, true);
	//Send the proper header information along with the request
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.setRequestHeader("Content-length", params.length);
	xmlhttp.setRequestHeader("Connection", "close");
	
	xmlhttp.send(params);
}

function checkUpToDate() {
	
}

function stateChanged() {
	if (xmlhttp.readyState==4)
	{
		document.getElementById("mydocuments").innerHTML=xmlhttp.responseText;
		document.getElementById( 'contents' ).style.display = '';
	}
}

function stateChanged2() {
	if (xmlhttp.readyState == 4) {
		createEditor();
		editor.setData( xmlhttp.responseText );
	}
}

function GetXmlHttpObject() {
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	}
	if (window.ActiveXObject) {
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
	return null;
}

	//]]>
	</script>
</head>
<body>
	<h1>
		Database Document Editing
	</h1>
	<!-- This <div> holds alert messages to be display in the sample page. -->
	<div id="alerts">
		<noscript>
			<p>
				<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
				support, like yours, you should still see the contents (HTML data) and you should
				be able to edit it normally, without a rich editor interface.
			</p>
		</noscript>
	</div> 
	<p>
		Username: <input type='text' id='username' value="" />
		<br />
		Password: <input type='text' id='password' value="" />
		<br />
		UserId: <input type='text' id='userid' value=""/>
		<br />
		<input type='text' id='userInput' value='Enter Doc Id' />
		<input type='button' onclick='updateDocumentContents();' value='Update Document'/>
		<input type="button" onclick="sendEdit();" value="Save"/>
		<br />
		<input onclick="findDocuments();" type="button" value="Get Documents" />
		<input onclick="createEditor();" type="button" value="Create Editor" />
		<input onclick="removeEditor();" type="button" value="Remove Editor" />
	</p>
	<!-- This div will hold the editor. -->
	<div id="editor">
	</div>
	<div id="contents" style="display: none">
		<p>
			Documents: </p>
		<!-- This div will contain the documents available to the user -->
		<div id="mydocuments">
		</div>
	</div>
	<div id="document" style="display: none">
		<p>
			Editor Contents:</p>
		<!-- This div will be used to display the editor contents. -->
		<div id="documentId"> </div>
		<div id="title"> </div>
		<div id="editorcontents"> </div>
		<div id="timestamp"> </div>
	</div>
</body>
</html>
